<template>
    <view class="conter">
        <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
            <u-form-item label="" prop="userInfo.name" ref="item1">
                <u--input v-model="model1.userInfo.name" border="none" placeholder="请输入手机号"></u--input>
            </u-form-item>
            <u-form-item label="" prop="userInfo.verification" ref="item1">
                <u--input v-model="model1.userInfo.verification" border="none" placeholder="请输入验证码"></u--input>
                <verification :name="model1.userInfo.name"></verification>
            </u-form-item>
            <button class="btn_login" @click="btn_login">登录</button>

        </u--form>
    </view>
</template>

<script>
import { verification } from "../verification/verification_codes.vue"
import { get_code_login } from "../../api/user"
export default {
    components: {
        verification: () => import("../verification/verification_codes.vue"),
    },
    data() {
        return {
            model1: {
                userInfo: {
                    name: '15518528086',
                    verification: '',
                },
            },
            rules: {
                'userInfo.name': {
                    type: 'string',
                    required: true,
                    message: '请输入正确手机号',
                    trigger: ['blur', 'change'],
                    pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
                },
                'userInfo.verification': {
                    type: 'string',
                    required: true,
                    message: '请输入验证码',
                    trigger: ['blur', 'change']
                },

            }
        }
    },
    methods: {
        btn_login() {
            let { name, verification } = this.model1.userInfo
            console.log(name)
            if (!/^1[3-9]\d{9}$/.test(name)) {
                // this.$toast('手机号码格式错误');
                console.log("手机号码格式错误")
                return;
            }
            if (!/^\d{6}$/.test(verification)) {
                // this.$toast('验证码格式错误');
                console.log("验证码格式错误")
                return;
            }
            get_code_login({
                username: name,
                vercode: verification
            }).then(res => {
                console.log(res)
                // uni.navigateTo({ url: '/pages/index/index' })
                this.$router.push('/pages/index/index')

            })
        }
    },
}
</script>

<style lang="scss" scoped>
.conter {
    width: 80%;
    margin: 100px auto;



    .btn_login {
        width: 80%;
        height: 40px;
        margin: 15px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fdd100;
        color: #fff;
        border-radius: 25px;
    }
}
</style>